<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video标签的使用</title>
</head>

<body>
    <video id="video" class="video-js" controls="controls" width="100%" height="100%" preload="auto" poster="http://vjs.zencdn.net/v/oceans.png">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </source>
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
        </source>
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
        </source>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
            </a>
        </p>
    </video>
    <div>
        <h3>控制面板</h3>
        <div>
            <button onclick="playVideo()">播放</button>
            <button onclick="pauseVideo()">暂停</button>
            <button onclick="stopVideo()">停止</button>
            <button onclick="fullScreen()">全屏</button>
            <button onclick="exitFullScreen()">退出全屏</button>
            <button onclick="muteVideo()">静音</button>
            <button onclick="unmuteVideo()">取消静音</button>
            <button onclick="fastForward()">快进（5秒）</button>
            <button onclick="fastBackward()">快退（5秒）</button>
            <button onclick="volumeTurnUp()">音量放大</button>
            <button onclick="volumeTurnDown()">音量缩小</button>
            <button onclick="accelerate()">加速</button>
            <button onclick="slowDown()">减速</button>
        </div>
    </div>
    <script>
        var video = document.getElementById('video');
        console.info(video.prototype);
        //播放
        function playVideo() {
            video.play();
        }
        //暂停
        function pauseVideo() {
            video.pause();
        }
        //停止
        function stopVideo() {
            video.ended = true;
            video.currentTime = 0;
            video.pause();
        }
        //全屏
        function fullScreen() {
            if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }
            else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            }
            else if (video.requestFullscreen) {
                video.requestFullscreen();
            }
        }
        //退出全屏
        function exitFullScreen() {
            if (document.webkitRequestFullScreen) {
                document.webkitCancelFullScreen();
            }
            else if (document.mozRequestFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.requestFullscreen) {
                document.exitFullscreen();
            }
        }
        //静音
        function muteVideo() {
            video.muted = true;
        }
        //取消静音
        function unmuteVideo() {
            video.muted = false;
        }
        //快进（5秒）
        function fastForward() {
            video.currentTime += 5;
        }
        //快退（5秒）
        function fastBackward() {
            video.currentTime -= 5;
        }
        //音量放大
        function volumeTurnUp() {
            if (video.volume === 1) {
                return;
            }
            video.volume += 0.1;
        }
        //音量缩小
        function volumeTurnDown() {
            if (video.volume === 0) {
                return;
            }
            video.volume -= 0.1;
        }
        //加速
        function accelerate() {
            video.playbackRate += 0.5;
        }
        //减速
        function slowDown() {
            if (video.playbackRate === -0.5) {
                return;
            }
            video.playbackRate -= 0.5;
        }
    </script>
</body>

</html>